<template>
  <div class="app-container calendar-list-container">
    <el-form :rules="rules" ref="dataForm" label-position="left" status-icon :model="form" label-width="80px">
      <el-row>
        <el-col :span="11" :offset="1">
          <div class="filter-container">
            <router-link :to="path">
              <span class="back-link"><svg-icon icon-class="ds-left-double-arrow" /> 返回</span>
            </router-link>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" :offset="1">
          <p class="form-header"><svg-icon icon-class="ds-config" />基本设置</p>
          <el-form label-width='90px' class="forms">
            <el-form-item label="分组名称：" prop="group_name">
              {{form.group_name}}
            </el-form-item>
            <el-form-item label="分组描述：">
              {{form.group_des}}
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" :offset="1">
          <p class="form-header"><svg-icon icon-class="ds-lock" />组权限设置</p>
          <el-form label-width='90px' class="forms">
            <el-form-item label="合作方管理">
            </el-form-item>
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[0]" :label="index" :key="index" disabled>{{city}}</el-checkbox-button>
            </el-checkbox-group>
            <el-form-item label="课程管理">
            </el-form-item>
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[1]" :label="index" :key="index" disabled>{{city}}</el-checkbox-button>
            </el-checkbox-group>
            <el-form-item label="Tips管理">
            </el-form-item>
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[2]" :label="index" :key="index" disabled>{{city}}</el-checkbox-button>
            </el-checkbox-group>
            <el-form-item label="用户管理">
            </el-form-item>
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[3]" :label="index" :key="index" disabled>{{city}}</el-checkbox-button>
            </el-checkbox-group>
            <el-form-item label="账号管理">
            </el-form-item>
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[4]" :label="index" :key="index" disabled>{{city}}</el-checkbox-button>
            </el-checkbox-group>
            <el-form-item label="权限管理">
            </el-form-item>
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[5]" :label="index" :key="index" disabled>{{city}}</el-checkbox-button>
            </el-checkbox-group>
          </el-form>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<style>
  .buttons {
    text-align:center;
  }
  .buttons .el-form-item__content {
    margin-left: 0px!important;
  }
  .el-form-item__content {
    color: #666;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .pdl10 {
    padding-left: 10px;
  }
  .form-header {
    /* padding-left: 10px; */
    color: #606266;
    font-weight: 700;
  }
  .form-header svg {
    color: #ed8a94;
    font-size: 20px;
    margin-right: 10px;
  }
  .el-form-item__label {
    font-weight: normal;
  }
  .forms .el-form-item {
    margin-bottom: 10px;
  }
  .forms .el-checkbox-group {
    margin-bottom: 10px;
  }
  .clearfix:after {
    clear: both
  }
  .el-card__header {
    background-color: #4fb1e2;
    color: #ffffff;
    line-height: 58px;
    padding: 0 10px 0 20px;
  }
  .checkspan {
    color: #4fb1e2;
    cursor: pointer;
  }
  .el-card__header button {
    color: #ffffff;
    float: right;
    padding: 3px 0;
    margin: 15px 10px;
  }
  .el-card__header button i {
    font-size: 20px;
  }
  .el-card__header svg {
    font-size: 28px;
    float: right;
    padding: 3px 0;
    margin: 15px 5px;
    cursor: pointer;
  }
  .el-col:nth-child(3n){
    clear: right;
  }
  .back-link {
    color: #ed8a94;
    font-size: 14px;
  }
  .back-link svg {
    font-size: 12px;
  }
  .el-transfer-panel__body {
    height: 203px;
  }
  .el-transfer-panel__list.is-filterable {
    height: 149px;
  }
  .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    font-size: 14px;
  }
  .el-checkbox-button__inner {
    border-left: 1px solid #dcdfe6;
    border-radius: 0!important;
    margin-right: 10px;
  }
</style>
<script>
import { getGroupInfo, addUserGroup, updateUserGroup } from '@/api/user'
import { subComma, authList } from '@/utils'
export default {
  data() {
    // 数据校验
    const checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('分组名称不能为空'))
      } else {
        callback()
      }
    }
    return {
      path: '/manager/auth-index',
      tableKey: 0,
      type: 'create',
      form: {
        id: '',
        group_name: '',
        group_des: '',
        uservalues: [],
        auth: [],
        g_admin_ids: '',
        auth_ids: ''
      },
      check_span: [
        '全选',
        '全选',
        '全选',
        '全选',
        '全选',
        '全选'
      ],
      auths: authList(),
      value2: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1
      },
      rules: {
        group_name: [{ validator: checkName, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.id = this.$route.params.id
    if (this.id !== undefined && this.id !== '') {
      this.initData()
    }
  },
  methods: {
    onSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          var auth_str = ''
          for (const v of this.form.auth) {
            auth_str += v + ','
          }
          this.form.authority_id = subComma(auth_str)
          if (this.type === 'create') {
            addUserGroup(this.form).then(response => {
              this.$message({
                message: '创建成功',
                type: 'success',
                duration: 2000,
                onClose: () => {
                  this.$router.push({ path: this.path })
                }
              })
            })
          } else {
            updateUserGroup(this.form).then(response => {
              this.$message({
                message: '修改成功',
                type: 'success',
                duration: 2000,
                onClose: () => {
                  this.$router.push({ path: this.path })
                }
              })
            })
          }
        }
      })
    },
    initData() {
      if (this.id !== undefined && this.id !== '') {
        getGroupInfo({ id: this.id }).then(response => {
          const data = response.data
          this.form.id = data.id
          this.form.group_name = data.group_name
          this.form.group_des = data.group_des
          this.form.auth = data.authority_id.split(',')
          this.type = 'update'
        })
      }
    },
    checkHandle(id) { // 全选或者反选
      if (this.check_span[id] === '全选') {
        for (const i in this.auths[id]) {
          const index = this.form.auth.indexOf(i)
          if (index === -1) {
            this.form.auth.push(i)
          }
        }
        this.check_span.splice(id, 1, '取消全选')
      } else {
        for (const i in this.auths[id]) {
          const index = this.form.auth.indexOf(i)
          if (index > -1) {
            this.form.auth.splice(index, 1)
          }
        }
        this.check_span.splice(id, 1, '全选')
      }
    }
  }
}
</script>
